@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme {
  --width-page: 960px;

  --min-width-page: 960px;

  --container-page: 960px;

  /* 医疗蓝作为主色调 */
  --color-primary: #0077b6;

  --text-color-button: #4a5568;
  --text-color-button-hover: #2d3748;

  /* 浅灰背景提供专业感 */
  --background-color-body: #f0f4f8;
  --background-color-button: #ffffff;
  --background-color-button-hover: #e6f2ff;

  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --animate-bg-blink: bg-blink 0.2s;
  @keyframes bg-blink {
    0% {
      background-color: rgb(239, 243, 244);
    }
    50% {
      background-color: rgb(229, 234, 236);
    }
    100% {
      background-color: rgb(239, 243, 244);
    }
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* 侧边栏滚动条样式 */
.sidebar-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.sidebar-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

body {
  color: #374151;
  font-family: "Inter", sans-serif;
}

input,
textarea {
  outline: none;
}

.markdown {
  line-height: 1.75;

  a {
    color: blue;

    &:hover {
      text-decoration: underline;
    }
  }

  h1 {
    @apply text-2xl font-bold;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  h2 {
    @apply text-xl font-bold;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  h3 {
    @apply text-lg font-bold;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  h4 {
    @apply text-base font-bold;
    margin-bottom: 0.5rem;
  }

  h5 {
    @apply text-sm font-bold;
  }

  h6 {
    @apply text-xs font-bold;
  }

  ul {
    @apply list-disc pl-4;
  }

  ol {
    @apply list-decimal pl-4;
  }
}

:root {
  --radius: 0.625rem;
  /* 医学主题配色 - 浅色模式 */
  --background: #f0f4f8;
  --foreground: #2d3748;
  --card: #ffffff;
  --card-foreground: #2d3748;
  --popover: #ffffff;
  --popover-foreground: #2d3748;
  /* 主蓝色 - 医疗蓝 */
  --primary: #0077b6;
  --primary-foreground: #ffffff;
  /* 薄荷绿作为次要色调 */
  --secondary: #e0f7fa;
  --secondary-foreground: #006064;
  --muted: #e6f1f8;
  --muted-foreground: #64748b;
  /* 浅薄荷绿作为强调色 */
  --accent: #b2ebf2;
  --accent-foreground: #006064;
  --destructive: #ef4444;
  --border: #cbd5e1;
  --input: #e2e8f0;
  --ring: #0077b6;
  /* 图表颜色 - 医疗主题配色 */
  --chart-1: #0077b6; /* 医疗蓝 */
  --chart-2: #4cc9f0; /* 淡蓝色 */
  --chart-3: #48cae4; /* 天蓝色 */
  --chart-4: #00b4d8; /* 浅蓝绿色 */
  --chart-5: #0096c7; /* 深海蓝 */
  --sidebar: #ffffff;
  --sidebar-foreground: #2d3748;
  --sidebar-primary: #0077b6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e0f7fa;
  --sidebar-accent-foreground: #006064;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: #0077b6;
}

.dark {
  /* 医学主题配色 - 深色模式 */
  --background: #1a202c;
  --foreground: #f7fafc;
  --card: #2d3748;
  --card-foreground: #f7fafc;
  --popover: #2d3748;
  --popover-foreground: #f7fafc;
  /* 暗色模式下的主色调 - 更鲜明的医疗蓝 */
  --primary: #38b2f8;
  --primary-foreground: #f7fafc;
  /* 深色环境下的次要色调 */
  --secondary: #164e63;
  --secondary-foreground: #f7fafc;
  --muted: #2c3e50;
  --muted-foreground: #a0aec0;
  /* 深色环境下的强调色 */
  --accent: #0d9488;
  --accent-foreground: #f7fafc;
  --destructive: #ef4444;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #38b2f8;
  /* 图表颜色 - 深色医疗主题 */
  --chart-1: #38b2f8; /* 亮蓝色 */
  --chart-2: #06b6d4; /* 青色 */
  --chart-3: #14b8a6; /* 蓝绿色 */
  --chart-4: #3b82f6; /* 靛蓝色 */
  --chart-5: #8b5cf6; /* 紫色 */
  --sidebar: #2d3748;
  --sidebar-foreground: #f7fafc;
  --sidebar-primary: #38b2f8;
  --sidebar-primary-foreground: #f7fafc;
  --sidebar-accent: #0d9488;
  --sidebar-accent-foreground: #f7fafc;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #38b2f8;
}

/*
  ---break---
*/

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/*
  ---break---
*/

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* hack fix for https://github.com/KaTeX/KaTeX/discussions/2942 */
.katex {
  position: relative;
}
@layer components {
  .dialog-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm;
    z-index: 9999 !important;
  }
  
  .dialog-content {
    @apply bg-white dark:bg-gray-800 rounded-xl p-6 shadow-2xl;
    animation: dialogShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999 !important;
    position: relative !important;
  }

  @keyframes dialogShow {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}